ল্যাজি লোডিং (Lazy Loading) হলো একটি টেকনিক যেখানে নির্দিষ্ট মডিউল বা রুট শুধুমাত্র যখন প্রয়োজন হবে তখন লোড করা হয়। এর ফলে অ্যাপ্লিকেশনটির প্রথম লোডিং সময় কমে যায় এবং বাকি মডিউলগুলো পরে লোড করা হয়। এটি অ্যাপ্লিকেশনের পারফর্মেন্স উন্নত করতে সাহায্য করে, কারণ মডিউলগুলো কেবল তখনই লোড হয় যখন ব্যবহারকারী সেই রুট বা পেজে পৌঁছায়।

Angular-এ ল্যাজি লোডিং কনফিগার করার জন্য Angular Router ব্যবহার করা হয় এবং মডিউলগুলোকে আলাদাভাবে লোড করা হয়।

ল্যাজি লোডিং কনফিগারেশন

ল্যাজি লোডিং সক্ষম করতে, রাউটিং কনফিগারেশনে loadChildren প্রপার্টি ব্যবহার করা হয়। এর মাধ্যমে নির্দিষ্ট মডিউলটি অ্যাসিনক্রোনাসভাবে লোড করা হয়।

উদাহরণ: ল্যাজি লোডিং কনফিগারেশন

ধরা যাক, আপনার অ্যাপ্লিকেশনে দুটি মডিউল রয়েছে—HomeModule এবং AboutModule। আপনি চাচ্ছেন যে AboutModule কেবল তখনই লোড হোক যখন ব্যবহারকারী /about রুটে যাবে।

1. প্রথমে, একটি মডিউল তৈরি করুন, যেমন AboutModule:

ng generate module about --route about --module app-routing

এটি স্বয়ংক্রিয়ভাবে রাউটিং কনফিগারেশন তৈরি করে এবং Lazy Loading সক্ষম করে।

2. app-routing.module.ts ফাইলে ল্যাজি লোডিং কনফিগারেশন করুন:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

এখানে, loadChildren ব্যবহার করা হয়েছে AboutModule কে ল্যাজি লোড করার জন্য। import() সিনট্যাক্সটি ECMAScript dynamic import ব্যবহার করে মডিউলটি অ্যাসিনক্রোনাসভাবে লোড করবে।

AboutModule (ল্যাজি লোডিং মডিউল)

AboutModule তৈরি করার সময় নিশ্চিত করতে হবে যে এর নিজস্ব রাউটিং কনফিগারেশন রয়েছে।

about-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: AboutComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AboutRoutingModule { }

about.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AboutComponent } from './about/about.component';
import { AboutRoutingModule } from './about-routing.module';

@NgModule({
  declarations: [AboutComponent],
  imports: [
    CommonModule,
    AboutRoutingModule
  ]
})
export class AboutModule { }

এখানে AboutModule নিজে একটি স্বাধীন মডিউল হিসেবে তৈরি করা হয়েছে এবং এর মধ্যে AboutRoutingModule ব্যবহৃত হয়েছে, যা রাউটিং কনফিগারেশন করে।

ল্যাজি লোডিং এর সুবিধা

1. পারফর্মেন্স উন্নয়ন: ল্যাজি লোডিং ব্যবহার করলে অ্যাপ্লিকেশনের প্রথম লোডিং সময় কমে যায়, কারণ শুধুমাত্র প্রয়োজনীয় মডিউলই প্রথমে লোড হয়।
2. মেমরি ব্যবস্থাপনা: ল্যাজি লোডিং ব্যবহারে অ্যাপ্লিকেশনটির মেমরি ব্যবহারের দক্ষতা বৃদ্ধি পায়, কারণ ব্যবহারকারী যে অংশটি দেখছে, সেই অংশের মডিউলগুলোই লোড হয়।
3. ব্যবহারকারী অভিজ্ঞতা: ব্যবহারকারী প্রথমে অ্যাপ্লিকেশনটি দ্রুত অ্যাক্সেস করতে পারেন, কারণ শুধুমাত্র ইনিশিয়াল রুটই লোড হবে। পরবর্তী রাউটগুলোর জন্য ল্যাজি লোডিং হতে পারে।

ল্যাজি লোডিংয়ের অন্যান্য ব্যবহারের পদ্ধতি

• Preloading Strategy: আপনি যদি চান যে কিছু ল্যাজি লোডিং মডিউল প্রিলোড করা হোক, তাহলে Angular-এ Preloading Strategy ব্যবহার করা যেতে পারে। Angular CLI-এর মাধ্যমে আপনি প্রিলোড স্ট্র্যাটেজি কনফিগার করতে পারেন:

  import { NgModule } from '@angular/core';
  import { RouterModule, Routes, PreloadAllModules } from '@angular/router';
  
  const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) }
  ];
  
  @NgModule({
    imports: [
      RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
    ],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  

এতে করে PreloadAllModules স্ট্র্যাটেজি ব্যবহৃত হলে অ্যাপ্লিকেশন লোড হওয়ার পরে সব ল্যাজি লোডিং মডিউল একে একে লোড হতে থাকবে।

সারাংশ

ল্যাজি লোডিং একটি অত্যন্ত কার্যকর পদ্ধতি যা Angular অ্যাপ্লিকেশনের পারফর্মেন্স উন্নত করতে সাহায্য করে। এটি মডিউলগুলোকে অ্যাসিনক্রোনাসভাবে লোড করার সুযোগ দেয়, যার ফলে প্রথম লোডিং সময় কমে যায় এবং মেমরি ব্যবস্থাপনা আরও উন্নত হয়। Angular রাউটিং কনফিগারেশনে loadChildren ব্যবহার করে ল্যাজি লোডিং কার্যকর করা যায়, এবং বিভিন্ন রাউটগুলোর জন্য প্রয়োজনীয় মডিউল কেবল তখনই লোড করা হয়, যখন তা ব্যবহারকারী দেখতে চান।